<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/8/14
  Time: 17:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/date/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/sweetalert.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/treeview/bootstrap-treeview.min.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-3.2.1.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/sweetalert.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/table/bootstrap-table.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/date/Moment.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/date/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/treeview/bootstrap-treeview.min.js"></script>
</head>
<body>
<ul id="tree"></ul>
</body>
<script>
    $(function(){
        var tree = [
            // {
            //     text: "Parent 1",
            //     nodes: [
            //         {
            //             text: "Child 1",
            //             nodes: [
            //                 {
            //                     text: "Grandchild 1"
            //                 },
            //                 {
            //                     text: "Grandchild 2"
            //                 }
            //             ]
            //         },
            //         {
            //             text: "Child 2"
            //         }
            //     ]
            // },
            // {
            //     text: "Parent 2"
            // },
            // {
            //     text: "Parent 3"
            // },
            // {
            //     text: "Parent 4"
            // },
            // {
            //     text: "Parent 5"
            // }
        ];
        $(function(){
            $.ajax({
                "url":"${pageContext.request.contextPath}/Permission/query",
                "type":"post",
                "success":function(data){
                    if(data.pertype='menu'){
                        var aa =[];
                        aa = [{
                            text:data.pername
                        }];
                    }
                    tree = aa;
                    $('#tree').treeview({
                        data: tree,      // data is not optional
                        showCheckbox:true,
                        onNodeChecked: function(event, node) { //选中节点
                            var selectNodes = getChildNodeIdArr(node); //获取所有子节点
                            if (selectNodes) { //子节点不为空，则选中所有子节点
                                $('#tree').treeview('checkNode', [selectNodes, { silent: true }]);
                            }
                            var parentNode = $("#tree").treeview("getNode", node.parentId);
                            setParentNodeCheck(node);
                        },
                        onNodeUnchecked: function(event, node) { //取消选中节点
                            // 取消父节点 子节点取消
                            var selectNodes = setChildNodeUncheck(node); //获取未被选中的子节点
                            var childNodes = getChildNodeIdArr(node);    //获取所有子节点
                            if (selectNodes && selectNodes.length==0) { //有子节点且未被选中的子节点数目为0，则取消选中所有子节点
                                console.log("反选");
                                $('#tree').treeview('uncheckNode', [childNodes, { silent: true }]);
                            }
                            // 取消节点 父节点取消
                            var parentNode = $("#tree").treeview("getNode", node.parentId);  //获取父节点
                            var selectNodes = getChildNodeIdArr(node);
                            setParentNodeCheck(node);
                        }
                    });
                }
            });
        }) ;
        // 选中父节点时，选中所有子节点
        function getChildNodeIdArr(node) {
            var ts = [];
            if (node.nodes) {
                for (x in node.nodes) {
                    ts.push(node.nodes[x].nodeId);
                    if (node.nodes[x].nodes) {
                        var getNodeDieDai = getChildNodeIdArr(node.nodes[x]);
                        for (j in getNodeDieDai) {
                            ts.push(getNodeDieDai[j]);
                        }
                    }
                }
            } else {
                ts.push(node.nodeId);
            }
            return ts;
        }
        // 选中所有子节点时，选中父节点 取消子节点时取消父节点
        function setParentNodeCheck(node) {
            var parentNode = $("#tree").treeview("getNode", node.parentId);
            if (parentNode.nodes) {
                var checkedCount = 0;
                for (x in parentNode.nodes) {
                    if (parentNode.nodes[x].state.checked) {
                        checkedCount ++;
                    } else {
                        break;
                    }
                }
                if (checkedCount == parentNode.nodes.length) {  //如果子节点全部被选 父全选
                    $("#tree").treeview("checkNode", parentNode.nodeId);
                    setParentNodeCheck(parentNode);
                }else {   //如果子节点未全部被选 父未全选
                    $('#tree').treeview('uncheckNode', parentNode.nodeId);
                    setParentNodeCheck(parentNode);
                }
            }
        }
        // 取消父节点时 取消所有子节点
        function setChildNodeUncheck(node) {
            if (node.nodes) {
                var ts = [];    //当前节点子集中未被选中的集合
                for (x in node.nodes) {
                    if (!node.nodes[x].state.checked) {
                        ts.push(node.nodes[x].nodeId);
                    }
                    if (node.nodes[x].nodes) {
                        var getNodeDieDai = node.nodes[x];
                        console.log(getNodeDieDai);
                        for (j in getNodeDieDai) {
                            if (!getNodeDieDai.nodes[x].state.checked) {
                                ts.push(getNodeDieDai[j]);
                            }
                        }
                    }
                }
            }
            return ts;
        }
    });
</script>
</html>
